<template>
  <div class="specialInfo" :class="{'shareComponent':shareIos}">
    <div class="title">{{title}}</div>
    <div class="date">
      <span>{{crtDtm|dateFilter}}</span>
      <div class="icon" @click="subscribe">
        <i v-show="!is_subscribe" class="iconfont iconxuexi_icon_dingyue" style="color:#999;font-size:18px;"></i>
        <i v-show="is_subscribe" class="iconfont iconxuexi_icon_yidingyue1" style="color:#DD4D44;font-size:18px;"></i>
      </div>
    </div>
    <div class="content" v-html="article"></div>

    <div v-show="!noteWriteShow" class="note">
      <div class="inputView" @click="noteWriteShow=true">记录一下现在的想法</div>
    </div>
    <div v-show="noteWriteShow" class="mask" @click="noteWriteShow=false"></div>
    <div v-show="noteWriteShow" class="noteWrite">
      <textarea v-model="noteValue" @blur="textareaBlur" autofocus placeholder="记录一下现在的想法" name="" id="" cols="30" rows="10"></textarea>
      <div class="btnBar">
        <div class="check">
          <mu-checkbox color="#EB4D44" uncheck-icon=":iconxuexi_pinglun_gongbu iconfont" checked-icon=":iconxuexi_pinglun_gongbu iconfont" v-model="checkbox" :label="checkbox?'公开':'私密'"></mu-checkbox>
        </div>
        <div class="btn" @click="sendNote">发  布</div>
      </div>
    </div>
    <share :shareData="shareData"  v-if="shareIos"  :bgColor="bgColor"  />
  </div>
</template>

<script>
  import share from '@/views/home/components/share.vue';
  export default {
    data () {
      return {
        noteWriteShow:false,
        checkbox:true,
        noteValue:'',
        readTimeInterval: null,
        title:'',
        article: '',
        crtDtm: '',
        is_subscribe: '',
        learning_duration: '',
        isTodayPlan: false,
        task_id: null,
        task_course_id: null,
        duration: 0,
        shareData:[],
        bgColor:{
            swiperColor:'#fff',
            codeColor:'#F5F5F5'
        },
        shareIos:false,
        isAndroid:false,
        orgnation_id:'',
        isIOS:false,
      }
    },
    created() {
        if(this.$route.query.fromIos){
            this.id = this.$route.query.id
            this.type = this.$route.query.type
            this.shareIos =true;
            this.orgnation_id =this.$route.query.orgnation_id;
            this.phone=this.$route.query.phone;
        }else{
            if(this.$route.query.id){
                this.id = this.$route.query.id
                this.type = this.$route.query.type
            }
        }


      this.timeUsed = 0;
      clearInterval(this.readTimeInterval);
      this.readTimeInterval = setInterval(() => {
        this.timeUsed++;
      }, 1000);
      // if(this.$route.query.id){
      //   this.id = this.$route.query.id
      //   this.type = this.$route.query.type
      // }

      if (this.$route.query.isTodayPlan) {
        this.isTodayPlan = this.$route.query.isTodayPlan;
        this.task_id = this.$route.query.task_id;
        this.task_course_id = this.$route.query.task_course_id;
        this.duration = this.$route.query.duration;
      }
      this.getInfo()
      this.height = window.innerHeight
      //微信内置浏览器浏览H5页面弹出的键盘遮盖文本框的解决办法 
      window.addEventListener("resize", function () {
          if (document.activeElement.tagName == "INPUT" || document.activeElement.tagName == "TEXTAREA") {
              window.setTimeout(function () {
                  document.activeElement.scrollIntoViewIfNeeded();
              }, 0);
          }
      })
    },
      mounted(){
          var u = navigator.userAgent, app = navigator.appVersion;
          var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //g
          var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
          if (isAndroid) {
              //这个是安卓操作系统
              this.isAndroid =true;
              this.isIos =false;
              if(this.shareIos){
                  this.getAdShare(6)
              }
          }
          if (isIOS) {
              this.isAndroid =false;
              this.isIos =true;
              if(this.shareIos){
                  this.getAdShare(5)
              }
          }
      },
    beforeDestroy() {
      clearInterval(this.readTimeInterval);
      if (this.isTodayPlan) {
        if (this.timeUsed >= this.duration / 5) {
          let params = {
            uid: JSON.parse(window.Cookies.get('user_71ydj')).id,
            task_id: this.task_id,
            task_course_id: this.task_course_id
          }
          const url = `applets/StudyPlay/record_learn`
          this.$http.post(url, params)
            .then(res => {
              if (res.code === 200) {
              } else {
                this.$toast.error(res.msg);
              }
            });
          this.state = 1;
        } else {
          console.log(this.timeUsed, this.duration, 111111);
        }
      } else {
        console.log(this.timeUsed, this.learning_duration / 5);
        if (this.timeUsed >= this.learning_duration / 5) {
          this.state = 1;
        }
      }
      this.study_log();
    },
    methods: {
        getAdShare(id){
            this.$http
                .get("app/My/add_list", {
                    org_id: this.orgnation_id,
                    position: id,
                })
                .then(res => {
                    if(res.code==200){
                        if(res.data.length>0){
                            this.shareData =res.data;
                        }else{
                            this.shareData=[
                                {
                                    photo:'https://media.71ydj.com/17cd567662bafc8d63d73d41444585d2.jpg',
                                    link:'https://apps.apple.com/cn/app/id1434639733',
                                    remarks:'中纺机党建云',
                                }
                            ]
                        }
                    }
                })
        },
      async getInfo(){
        try {
          let params = {
            id: this.id,
            // id: 4,
            type: this.type,
            // type: 1,
            phone:window.Cookies.get('user_71ydj')?JSON.parse(window.Cookies.get('user_71ydj')).phone:this.phone,
          }
          const url = `applets/StudyInfo/special_info`
          let res = await this.$http.get(url, params)
          this.$progress.done()
          if (res.code === 200) {
            this.title = res.data.title;
            this.article = res.data.content
            this.crtDtm = res.data.create_time
            this.is_subscribe = res.data.is_subscribe
            this.learning_duration = res.data.learning_duration
            this.state = 2;
          } else {
            this.$toast.error(res.msg);
          }
        } catch (e) {
          console.log('error:', e)
        }
      },
      textareaBlur(){
        setTimeout(function() {
          var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;
          window.scrollTo(0, Math.max(scrollHeight - 1, 0));
        }, 100);
      },
      sendNote(){
        if (!this.noteValue) {
          return
        }
        this.noteWriteShow=false
        let params = {
          phone: JSON.parse(window.Cookies.get('user_71ydj')).phone,
          course_id: this.id,
          type: this.type,
          status: 3,
          state: this.checkbox?1:2,
          content: this.noteValue,
          org_id: JSON.parse(window.Cookies.get('user_71ydj')).organization_id
        }
        const url = `applets/My/add_note`
        this.$http.post(url, params).then(res => {
          if(res.code === 200){
            this.$toast.success("发布成功！");
          }else{
            this.$toast.error(res.msg);
          }
        })
      },
      study_log() {
        if (this.timeUsed) {
          let params = {
            phone: JSON.parse(window.Cookies.get('user_71ydj')).phone,
            status: 3,
            course_id: this.id,
            // chapter_id: e.id,
            type: this.type,
            learn_duration: this.timeUsed,
            state: this.state
          }
          const url = `applets/StudyPlay/study_log`
          this.$http.post(url, params).then( res => {
            if (res.code === 200) {
            } else {
              this.$toast.error(res.msg);
            }
          })
        }
      },
      subscribe(){
        let params = {
          course_id: this.id,
          type: this.type,
          phone: JSON.parse(window.Cookies.get('user_71ydj')).phone,
          status: 3
        }
        const url = `applets/Study/course_subscribe`
        this.$http.post(url, params).then(res => {
          if(res.code === 200){
            if(this.is_subscribe == 0){
              this.$toast.success("订阅成功！");
              this.is_subscribe = 1
            }else{
              this.$toast.success("取消成功！");
              this.is_subscribe = 0
            }
          }else{
            this.$toast.error(res.msg);
          }
        })
      },
    },
    components: {
      share,
    }
  }
</script>
<style>
  .specialInfo .content img{
    width: 100%;
  }
  .specialInfo.shareComponent{
    margin-bottom: 260px;
  }
</style>
<style lang="scss" scoped>
.specialInfo{
  box-sizing: border-box;
  padding-top: 25px;
  padding-bottom: 55px;
  position: relative;
  .title{
    box-sizing: border-box;
    padding: 0 26px;
    font-size:17px;
    line-height: 27px;
    font-family:PingFang-SC-Bold;
    font-weight:bold;
    color:rgba(51,51,51,1);
  }
  .date{
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    padding: 0 30px;
    margin-bottom: 12px;
    span{
      font-size:12px;
      font-family:PingFang-SC-Medium;
      font-weight:500;
      color:rgba(153,153,153,1);
    }
  }
  .content{
    box-sizing: border-box;
    padding: 0 30px;
    font-size:14px;
    font-family:PingFang-SC-Medium;
    font-weight:500;
    color:rgba(102,102,102,1);
    line-height:25px;
    width: 100%;
    img{
      width: 100%;
    }
  }
  >.note{
    background-color: #fff;
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
    height:45px;
    border-top: 1PX solid rgba(239,239,239,1);
    .inputView{
      width:343px;
      height:30px;
      line-height: 30px;
      background:rgba(249,249,249,1);
      border-radius:3px;
      margin: 7px auto;
      font-size:12px;
      font-family:PingFang-SC-Medium;
      font-weight:500;
      color:rgba(153,153,153,1);
      padding-left: 10px;
    }
  }
  >.mask{
    position: absolute;
    z-index: 9998;
    top: 0;
    left: 0;
    width:100%;
    height:100%;
    background-color:rgba(0,0,0,.4);
  }
  >.noteWrite{
    position: absolute;
    bottom: 0;
    z-index: 9999;
    width:100%;
    height:240px;
    background-color: #fff;
    border-radius:10px 10px 0px 0px;
    box-sizing: border-box;
    padding: 20px 16px 0 ;
    textarea{
      display: block;
      box-sizing: border-box;
      padding: 15px 10px;
      width:343px;
      height:170px;
      background:rgba(249,249,249,1);
      border-radius:3px;
      border: 0;
      outline: none;
      font-size:12px;
      font-family:PingFang-SC-Medium;
      font-weight:500;
      color:rgba(153,153,153,1);
      margin-bottom: 10px;
    }
    .btnBar{
      display: flex;
      height:30px;
      justify-content: space-between;
      font-size:12px;
      font-family:PingFang-SC-Medium;
      font-weight:500;
      align-items: center;
      .check{
        
      }
      .btn{
        width:80px;
        height:30px;
        background:rgba(235,77,68,1);
        border-radius:3px;
        line-height: 30px;
        font-size:14px;
        font-family:PingFang-SC-Medium;
        font-weight:500;
        color:rgba(255,255,255,1);
        text-align: center;
      }
    }
  }
}
p{
  text-indent: 2em !important;
}
</style>

